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Maak je site gebruiksvriend 


De klant is 


Hoe meet je de gebruiksvriendelijkheid van een web- 
site? Het Antwerpse hogeschoolproject Siteview 
dokterde een nieuwe wetenschappelijke techniek 
uit om je oogbewegingen op het web te volgen 
en te registreren. Eye-tracking moet een objec- 


tief antwoord geven op de vraag hoe surfers 


reageren op het design van een website. 


aar kijkt je 
bezoeker het 
eerst naar? 


En hoe snel kan hij alles vin- 
den? Op het colloquium ‘Usa- 
bility en Internet’ werden eind 
vorig jaar de eerste resultaten 
voorgesteld. Wij overlopen 
ze, en geven je meteen en- 
kele tips voor je eigen site. 
Ben je student, en wil je je 
eindwerk voorstellen op het 
internet? Of ben je kunstenaar 
in de dop, en wil je je creaties 
on line verkopen? Iedereen kan 
heel makkelijk webpublicaties 
maken, nu de meeste internet- 
providers je een aantal megaby- 
tes on line bij je abonnement ca- 
deau doen. Maar hoe zorg je er- 
voor dat je site in de positieve zin 
opvalt bij je bezoekers, zonder 
schreeuwerig en amateuristisch 
over te komen? Daarover worden 
wetenschappelijk onderbouwde 
studies gemaakt. Clickx trok naar 
het Departement Ontwerpwe- 
tenschappen aan de Hogeschool 
Antwerpen en sprak er met de 
mensen van het project Siteview (Fo- 
cus on Human Computer Interaction). 


Het moet klikken! 


Het internet is het zapmedium bij uitstek. De 
structuur van het wereldwijde web is zo gemaakt 
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dat je niet anders kan dan jezelf van de ene hy- 
perlink naar de andere katapulteren. De muis is 
de ultieme afstandsbediening. Je site moet met 
andere woorden zo aantrekkelijk in elkaar zit- 
ten, dat die je bezoeker vanaf de eerste seconde 
bij z'n nekvel grijpt. Het moet meteen ‘klikken’, 
of je bezoeker klikt je site weg. Ook daarna moet 
je de aandacht gaande houden. De surfer moet 
meteen die informatie vinden waar hij naar op 
zoek was: je site moet dus logisch en duidelijk 
gestructureerd zijn. De kwaliteit van je website 
bepaalt in onze www-samenleving voor een 
groot deel het imago van je bedrijf, je vereni- 
ging, of.… je persoonlijke imago natuurlijk. Geen 
wonder dus dat er sinds een tijdje allerlei ad- 
viesbureaus de kop opsteken die je (professio- 
nele) site, nog voor hij on line gaat, testen op z’n 
usability of gebruiksgemak. 


In het oog gehouden 


Welke criteria hanteer je om een site goed of 
slecht, logisch of onlogisch te vinden? Je vindt 
een ontwerp mooi of niet, en smaken verschil 
len. Vele adviesbureaus werken met subjectie- 
ve technieken als enquêtes en observaties van 
proefpersonen. Maar sommige bedrijven die 
advies vragen, willen dat dat advies objectief on- 
derbouwd wordt Ze willen harde cijfers, zeg 
maar. Een beetje zoals kijkcijfers uiteindelijk 
bepalen of een televisieprogramma goed of 
slecht is. Daarom kwam Siteview als eerste in 
België op de proppen met een objectieve regi- 
stratiemethode voor het kijkgedrag van proef: 
personen. 

Met een speciale camera worden de bewegin- 


elijker 


koning! 


Eye Tracking: werkingspricipe 


IN DIT DOSSIER VERTELLEN WE JE ALLES OVER HOE 
JE JE SITE GEBRUIKSVRIENDELIJKER KAN MAKEN 


De camera volgt je oogbewegingen via de reflectie van infrarood-licht. 


gen van de pupil via infrarood-reflectie opge- 
nomen, en achteraf geprojecteerd en uitgete- 
kend (met een scanpatroon) op de verschillen- 
de pagina’s van detestsite. De onderzoekers zien 
ook in real-time een blokje over het scherm be- 
wegen dat je kijkrichting aangeeft. Het is heel 
interessant om te zien hoe dat kijk-cursortje 
soms gelijk loopt met het pijltje van de muis. 
De rode lijnen op de illustraties vormen het tra- 
ject dat je ogen afgelegd hebben. Plots kan er 
een ontegensprekelijk antwoord komen op vra- 
gen als: wat ziet een gebruiker het eerst? Waar 
zoekt hij bepaalde functies? Heeft hij het logo 
gezien, en hoe lang heeft hij ernaar gekeken? 
Wordt de introductietekst gelezen, en zo ja, he- 
lemaal? 


Het examen 


Om de bijbehorende analysesoftware ViewSTAT 
op punt te stellen, hebben de onderzoekers op 
eigen initiatief een aantal cases uitgevoerd, o.a. 
op [ wwvvw.tiscali.be ] en [ www.vlaanderen.be |. 
Internetprovider Tiscali heeft intussen al wel 
gesleuteld aan z'n portaalsite, maar toch: surf 
even mee en kijk of je dezelfde ervaringen hebt 
als de zes proefpersonen in de test. Een van hun 
opdrachten was: “Zoek op de site het telefoon- 
nummer van de ADSL-supportdesk.’ De proef- 
personen deden er gemiddeld 135 seconden over 
om het nummer te vinden. Dat is de weten- 
schappelijke uitdrukking voor ‘je een ongeluk 
zoeken’. De link ‘contacteer ons’ bleek onvind- 
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aKilling me softiv 


Proefpersonen op weg naar huis (de homepagina): ze blijven langer hangen 
op de zone met het logo (7,86 sec.), dan ín de smalle balk (2,32 sec.) waar het 


baar, omdat hij ‘below the fold’ stond, dat wil 
zeggen, ver onderaan. Je moet minstens twee 
keer naar onderen scrollen. 

Er werd ook nog gevraagd om een aanbieding 
op e-Bay te checken. De proefpersonen klaar- 
den die klus op gemiddeld 17 seconden. Het 
invulvakje werkt duidelijk wel. Maar hoe raak 
je nu terug naar de homepagina? Amper één 
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huis-icoontje zich echt bevond.… 


op de zes testsurfers vond de juiste link naar 
huis, na zo’n twee minuten: een klein huisje 
links op de bovenste menubalk. 

Het logo zou een betere link naar de home- 
pagina geweest zijn: daar keken de proefper- 
sonen veel langer naar. Ten slotte kwam ook 
duidelijk uit de test dat er zoiets bestaat als 
‘banner-blindheid’. Banners, internetrecla- 


Verwarring alom op 
zoek naar het telefoon- 
nummer: de proefper- 
sonen kijken wild om 
zich heen op de pagina, 
maar zien ‘Contacteer 
ons’ linksonder niet 
staan. Te laag! 


goes zacen 


Zoek op de goede 
zonk 


eV ater ORE 


CebVO) 


Caramarhan Duttalard Prarkrgk | Areat-Brttareid Ital | Mederlend | Moorvagen | Dertareif | Aparte | Trtecht | Duid Ariba Zeaden | 


Hyperlink: Ook kortweg link genoemd. 
Een doorverwijzing naar een ander docu- 
ment of webpagina. Links staan vaak in 
een ander kleurtje of zijn onderstreept. 
Als je er met de cursor overheen sleept 
dan verandert die in een handje. 


Scrollen: Het beeld in je venster laten 
doorrollen zodat je de onderliggende 
inhoud kan bekijken. Je kan horizontaal 
of verticaal scrollen. 
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meboodschappen met een typische vorm, wor- 
den automatisch gemeden. Het was misschien 
niet zo’n goed idee van Tiscali om de ver- 
schillende internetformules die ze hun klan- 
ten te bieden hebben, aan te prijzen in zo’n 
banners rechts op het scherm. Voor de goede 
orde: Tiscali heeft intussen een aantal dingen 
op de site bijgestuurd, maar lang niet alles. 


Anders gaan kijken! 


Nu de analysesoftware op punt staat, is er ook 
commerciële interesse voor het Siteview-pro- 
ject. Zo is de VRT intussen een vaste klant, en 
het liet al eerder haar Digitale Thuisplatform 
door Siteview testen. Dat gebeurde deels met 
behulp van eye-tracking. In het Digitale Thuis- 
platform brengt de multimediapoot van de 
openbare omroep, de e-VRT, het web en de 
televisie dichter bij elkaar. Zowat iedereen 
heeft een tv, dus de drempel voor het web 


Op zoek naar De Sen 


De Siteview-camera registreert waar TE proef- 
persoon op de e-VRT-webtelevisie kijkt. 


wordt meteen ook lager. Maar alleen op voor- 
waarde dat de bediening via de afstandsbe- 
diening ook gebruiksvriendelijk is. Hoe surf 
en klik je op het internet, met vier pijltjes 
(links, rechts, boven, onder) en een Enter-toets 
(in het midden) op je afstandsbediening? Si- 
teview testte het pilootproject van de e-VRT in 
Schoten met oudere proefpersonen uit de niet- 
technologische generatie. Een van de knel- 
punten was dat de gebruiker geen duidelijk 
icoon vond dat aangaf hoe je moest bladeren. 
De boek-logica bracht uitkomst: bladeren doe 
je met links- en rechts-pijltjes, de bladzijden 
lees je met onder- en boven-pijltjes. Klinkt 
simpel, en daar draait het om: minder kan 
ook, less is more! 


HOE HET NIET MOET. 


Er was al heel wat informatie over het gebruiksgemak van websites te vinden op het 


internet. Probleem: de sites van de zelfverklaarde usability-goeroes zijn uiterst onover- 
zichtelijk… Toch raak je met deze links al een heel eind op weg. Op [ vwwvw.webpages- 
thatsuck.com/suckframe.htm ] vind je een cursus met een aantal voorbeeldsites van hoe 


Silit anar” Li2 


(Decembel 
[ (De ecember 9 g 


Becomina. a Usab WI Pr: ofessiona 


Ie 


n Fact 


2002) 


nch 14, 2002) 


onal (January 20, 2002) 


CLICKX MAGAZINE 35 - 25 FEBRUARI 2003 


ter Interaction (HCI) (March 31, 2002) 


Internetgoeroes geven vaak zelf het slechte voorbeeld. 


het niet moet: veel te veel knip- 
perende tekstjes, een chaos van 
kleuren, mysterieuze knoppen 
zonder tekstverklaring, enzo- 
voort. Er bestaat ook een gratis 
testje op [ www.fixingyourwebsi- 
te.com/optiview.html J, waarmee 
je zelf kan nagaan of de prentjes 
op je site niet te zwaar zijn. Het 
aantal kilobytes) bepaalt hoe 
lang het duurt vooraleer je site 
helemaal ingeladen is. 

Op [ www.alertbox.com ] vind je 
een overzicht van de commerciële 
webdesign-blunders in 2002. Een 
tipje van de sluier: scroll jij graag 
met de horizontale scrollbalk? 


— Bart Goossens — 


DE (0) GEBODEN 


Het tweejarige Siteview-project had 
naast de tests met eye-tracking, ook nog 
een tweede doel: een on line gids maken 
met methodes en richtlijnen op basis van 
her en der verspreide tips op het inter- 
net. Zo vind je op [ www.d-sciencelab. 
com/siteview | onder ‘strategies’ een 
aantal technieken om de structuur en 
het doel van je site te bepalen. Siteview 
verzamelde ook ontwerprichtlijnen, vul- 
de ze aan met eigen wetenschappelijke 
bevindingen uit de eye-tracking-tests, en 
bracht een duidelijke structuur aan. De 
on line verzameling (onder het kopje 
‘guides’) telt nu zo'n 854 items. Siteview 
stelde voor Clickx deze top 10 samen: 


Maak duidelijk wät het doel van je site 
is: verklaar wie je/bent en wat je doet. 


Groepeer alle bedrijfsinformatie 
(‘about’, ‘contact us’,…) in één’afzon- 
derlijke zone. 


Plaatsbelangrijke informatie boven de 
‘fold’, bovenaan dus, zodat je niet 
hoeftte scrollen. 


Gebruik minstens een 10-punt letter- 
grootte en liefst een schreefloos/letter- 
type (zoals Verdana of Arial) omde 
beste leesprestaties te bereiken: Linkse 
uitlijning leest het makkelijkst. 


Animeer nooit crúciale elementen zoals 
het logo, de tagline of een hoofdtitel. 


Plaats geen actieve link op een pagina, 
naar diezelfde pagina. 


Waarschuw de gebruiker als hij de site 

zal verlaten. Toon bijvoorbeeld het on- 
derscheid tussen links binnen jouw site, 
en links die verwijzen naar externe pa- 
gina's. 


Gebruik alleen beelden die de inhoud 
versterken of verklaren. Beelden moe- 
ten bijdragen tot de boodschap die je 
wil overbrengen. 


Voorzie tekstvervangers (de Zogenaam- 
de ALT-teksten) voor surfers die geen 
beelden kunnen bekijken. 


Test jeewebsite vóór de lancering bij en- 
kele vrienden, op verschillende brow- 
sers. 


